<template>
	<view class="content">
		<!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
		<z-paging ref="paging" :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false"
			style="height: calc(100% - 55px);" @scrolltolower="scrollToBottomFun">
			<!--供应商基本信息-->
			<supplierCard :item="supplierInfo" :isSelect="true"></supplierCard>
			
			<!--tab-->
			<view class="uTabsView">
				<u-tabs :list="tabList" :is-scroll="true" duration="0.08" :current="tabIndex" :show-bar="false"
					font-size="32" @change="tabChange"></u-tabs>
			</view>
			<!-- 自定义下拉刷新view -->
			<!-- <custom-refresher slot="refresher" :status="refresherStatus"></custom-refresher> -->
			<!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
			<view class="contentView">
				<!--详细信息-->
				<view v-if="tabIndex == 0">
					<supplierDetail :supplierInfo="supplierInfo"></supplierDetail>
				</view>
				<!--采购订单-->
				<view v-if="tabIndex == 1">
					<view v-for="(item, index) in tabList[1].arr" :key="index">
						<posContractCard :item="item"></posContractCard>
					</view>
				</view>
				<!--付款记录-->
				<view v-if="tabIndex == 2">
					<view v-for="(item, index) in tabList[2].arr" :key="index">
						<finPayRecordCard :item="item"></finPayRecordCard>
					</view>
				</view>
				<!--收票记录-->
				<view v-if="tabIndex == 3">
					<view v-for="(item, index) in tabList[3].arr" :key="index">
						<finInvoiceReceCard :item="item"></finInvoiceReceCard>
					</view>
				</view>
				<!--操作记录-->
				<view v-if="tabIndex == 4">
					<czjl :dataId="supplierInfo._id" pageType="supplier" :infoObj="supplierInfo" fl="供应商"></czjl>
				</view>
				<!--加载更多-->
				<getMore :isMore="tabList[tabIndex].isMore"></getMore>
			</view>
		</z-paging>
		<bottomBox :sheetList="sheetList" :addSheetList="addSheetList" :item="supplierInfo" :isGhc="supplierInfo.openstatus == 0"
			:isSupplier="supplierInfo.openstatus == 1" @pageDeleteShowFun="pageDeleteShowFun"
			@pageAddSheetFun="pageAddSheetFun" @pageBianjiFun="pageBianjiFun" @cxPGetDataFun="cxPGetDataFun">
		</bottomBox>
	</view>
</template>

<script>
	let that = '';
	import {
		apiModule,
		apiSupSupplier,
		apiPosContract,
		apiFinPayRecord,
		apiFinInvoiceRece
	} from '@/api/crm.js'
	import supplierCard from '@/components/card/supplierCard.vue'
	import supplierDetail from '@/components/detail/supplierDetail.vue'
	import bottomBox from '@/components/bottomBox/bottomBox.vue'

	import posContractCard from '@/components/card/posContractCard.vue'
	import finPayRecordCard from '@/components/card/finPayRecordCard.vue'
	import finInvoiceReceCard from '@/components/card/finInvoiceReceCard.vue'
	// import czjl from '@/components/detail/czjl.vue'
	// import getMore from '@/components/getMore/getMore.vue'
	export default {
		components: {
			supplierCard,
			supplierDetail,
			bottomBox,
			posContractCard,
			finPayRecordCard,
			finInvoiceReceCard,
			// czjl,
			// getMore
		},
		data() {
			return {
				supplierInfo: {},
				
				//tabl 切换选项
				tabList: [],

				//普通选项
				sheetList: [
					{text: '更换负责人'},
					{text: '放入供应商池'},
					{text: '删除'}
				],
				//添加选项
				addSheetList: [],
				tabIndex: 0,
				refresherStatus: 0,
				cardIndex: -1,
				isLoadSelectSupplierById: false
			}
		},
		onLoad(e) {
			that = this;
			that.cardIndex = e.index || -1;
			
			//如果是从详情页跳转过来的，不设置uni.$supplierInfo
			if (!e.fromDetail) {
				that.supplierInfo = uni.$supplierInfo || {};
			}
			
			//设置标题名称
			uni.setNavigationBarTitle({
				title: that.supplierInfo.name || '供应商详情'
			})
			
			//设置tab的选项值
			that.tabList= [
				{ name: '详细信息', arr: [], pageNum: 1, isMore: false },
				{ name: '采购订单', arr: [], pageNum: 1, isMore: true },
				{ name: '付款记录', arr: [], pageNum: 1, isMore: true },
				{ name: '收票记录', arr: [], pageNum: 1, isMore: true },
				{ name: '操作记录', arr: [], pageNum: 1, isMore: false }
			]
			
			//添加选项
			that.addSheetList=[
				{text: '采购订单'},
				{text: '付款记录'},
				{text: '收票记录'}
			]
			
			//回调载入				
			if(e.fromDetail) {
				that.selectSupplierByIdFun(e.id)
			}
		},
		onBackPress(e) {
			if (e.from == 'backbutton' && this.cardIndex != -1) {
				uni.$emit('updateListByIndex', {
					index: this.cardIndex,
					obj: this.supplierInfo
				})
			}
		},
		onShow() {
			if (that.isLoadSelectSupplierById) {
				that.selectSupplierByIdFun();
			}
		},
		methods: {
			//选项卡点击加载数据
			tabChange(index) {
				this.tabIndex = index;
				let item = that.tabList[index];
				if (item.arr && item.arr.length > 0) {
					return
				}
				if (index == 1) {//采购订单
					that.getPosContractFun()
				} else if (index == 2) {//付款记录
					that.getPaymentRecordFun()
				} else if (index == 3) {//收票记录
					that.getReceiptRecordFun()
				}
			},
			//tab数据滚动下拉
			scrollToBottomFun: function(e) {
				let index = that.tabIndex;
				let isMore = that.tabList[index].isMore;
				if (!isMore) {
					return
				}
				if (index == 1) {
					that.getPosContractFun()
				} else if (index == 2) {
					that.getPaymentRecordFun()
				} else if (index == 3) {
					that.getReceiptRecordFun()
				}
			},

			// 查询采购订单
			getPosContractFun: function() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let item = that.tabList[that.tabIndex];
				let reqData = {
					action: 'get_list',
					params: {
						matchObj: {
							supplier_id: that.supplierInfo.id
						},
						sortObj: {},
						pageNum: item.pageNum
					}
				}
				apiPosContract(reqData)
					.then(res => {
						that.setTabArrFun(res.data.data, item);
					})
			},
			// 查询付款记录
			getPaymentRecordFun: function() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let item = that.tabList[that.tabIndex];
				let reqData = {
					action: 'get_list',
					params: {
						matchObj: {
							supplier_id: that.supplierInfo.id
						},
						sortObj: {},
						pageNum: item.pageNum
					}
				}
				apiFinPayRecord(reqData)
					.then(res => {
						that.setTabArrFun(res.data.data, item);
					})
			},
			// 查询收票记录
			getReceiptRecordFun: function() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let item = that.tabList[that.tabIndex];
				let reqData = {
					action: 'get_list',
					params: {
						matchObj: {
							supplier_id: that.supplierInfo.id
						},
						sortObj: {},
						pageNum: item.pageNum
					}
				}
				apiFinInvoiceRece(reqData)
					.then(res => {
						that.setTabArrFun(res.data.data, item);
					})
			},
			// 给tabList中的arr赋值
			setTabArrFun: function(data, item) {
				if (item.pageNum == 1) {
					item.arr = [];
				}
				if (data.length >= 10) {
					item.pageNum += 1;
					item.isMore = true;
				} else {
					item.isMore = false;
				}
				item.arr = item.arr.concat(data);

				console.log(item.arr)

				that.$set(that.tabList, that.tabIndex, item)
				
				//延时关闭  加载中的 loading框
				setTimeout(() => {
					uni.hideLoading()
				}, 188);
			},
			
			// 修改供应商信息
			pageBianjiFun: function() {
				that.recoverTabListFun();
				uni.$supplierInfo = that.supplierInfo;
				uni.navigateTo({
					url: './add?type=update'
				})
			},
			// 子组件中回调方法=
			pageAddSheetFun: function(e) {
				console.log(e)
				that.recoverTabListFun();
				let url = '/pages/crm/';
				if (e == 0) {
					url +='pos_contract';
				} else if (e == 1) {
					url +='fin_pay_record';
				} else if (e == 2) {
					url +='fin_invoice_rece';
				}
				url += '/add?supplier_name=' + that.supplierInfo.name + '&supplier_id=' + that.supplierInfo.id
				
				console.log(url)
				uni.navigateTo({
					url
				})
			},
			// 删除函数
			pageDeleteShowFun: function(e) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除供应商名称为：' + that.supplierInfo.name + '的供应商吗?',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...',
								mask: true
							})
							let reqData = {
								action: 'del',
								params: {
									id: that.supplierInfo._id,
								}
							}
							apiSupSupplier(reqData)
								.then(res => {
									uni.showToast({
										title: '删除成功!',
										duration: 888,
										icon: 'none'
									})
									if (that.cardIndex != -1) {
										uni.$emit('deleteSupplierFun', {
											index: that.cardIndex
										})
									}
									setTimeout(() => {
										uni.navigateBack()
									}, 666)
								})
						}
					}
				})
			},
			
			// 根据id查询供应商
			selectSupplierByIdFun: function(id) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let reqData = {
					action: 'get_detail',
					params: {
						id: ''
					}
				}
				if (id) {
					reqData.params.id = id;
				} else {
					reqData.params.id = that.supplierInfo.id;
				}

				apiSupSupplier(reqData)
					.then(res => {
						let data = res.data;
						// 检查数据是否有效
						if (data && data.id) {
							that.supplierInfo = data;
							// 设置标题名称
							uni.setNavigationBarTitle({
								title: that.supplierInfo.name || '供应商详情'
							})
							setTimeout(() => {
								//延时关闭  加载中的 loading框
								uni.hideLoading()
							}, 300)
						} else {
							// 延迟关闭loading，避免太快消失
							setTimeout(() => {
								uni.hideLoading()
								uni.showModal({
									title: '提示',
									content: '相关内容不存在，或者已被删除！',
									showCancel: false,
									success() {
										uni.navigateBack()
									}
								})
							}, 500)
						}
					})
					.catch(err => {
						console.error('查询供应商详情失败:', err)
						setTimeout(() => {
							uni.hideLoading()
							uni.showModal({
								title: '提示',
								content: '网络错误，请稍后重试！',
								showCancel: false,
								success() {
									uni.navigateBack()
								}
							})
						}, 500)
					})
			},
			
			//重新改改tab中的参数
			recoverTabListFun: function() {
				that.isLoadSelectSupplierById = true;
				that.tabIndex = 0;
				that.tabList = [
					{
						name: '详细信息',
						isMore: false
					},
					{
						name: '采购订单',
						arr: [],
						pageNum: 1,
						isMore: true
					},
					{
						name: '付款记录',
						arr: [],
						pageNum: 1,
						isMore: true
					},
					{
						name: '收票记录',
						arr: [],
						pageNum: 1,
						isMore: true
					},
					{
						name: '操作记录',
						isMore: false
					}
				]
			},
			cxPGetDataFun: function(e) {
				uni.showToast({
					title: e + 'i',
					duration: 1000,
					icon: 'none',
					mask: true
				})
				uni.$emit('cxGetDataFun');
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		}
	}
</script>

<style>
	/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
	/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */

	/*如果有scoped，page的css设置建议放在App.vue中 */
	page {
		height: 100%;
		background-color: #F8F8F8;
	}

	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
	}

	.uTabsView {
		border-bottom: 1rpx solid #DDDDDD;
		z-index: 100;
		position: sticky;
		top: 0;
	}

	.contentView {
		/* background-color: #FFFFFF; */
		min-height: calc(100vh - 45px);
	}

	.flexRow {
		display: flex;
		font-size: 30rpx;
		margin-bottom: 8rpx;
	}

	.flexRow>view {
		width: 50%;
		display: flex;
	}

	.flexRow>view>text:first-child {
		width: 166rpx;
	}

	.item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}

	.uTabsView {
		top: -2px !important;
	}
</style>